<template>
  <div class="">{{ names.fullname }}-{{ names.username }}</div>
  <div>{{ fullname }}</div>
  <div>{{ scoreLevel }}</div>
  <button @click="changeName">改变</button>

  <br>

  <div>
    {{ message }}
  </div>
  <button @click="changeMessage">改变Message</button>
  <div>
    {{ info.name }} + {{ info.age }}
  </div>
  <button @click="changeInfo">改变info</button>
</template>

<script>
import { computed, onMounted, onBeforeMount, watch, watchEffect } from 'vue'
export default {
  setup: () => {
    const message = ref('hello world');
    const info = reactive({
      name: 'yan',
      age: 18
    })
    watch(message, (newValue, oldValue) => {
      console.log(newValue, oldValue);
    }, {
      immediate: true //是否初始化执行
    });
    const stopWatch = watchEffect(() => {
      console.log('这里是我想监听的', info.age, info.name, message);
    })
    watch(() => ({ ...info }), (newValue, oldValue) => {
      console.log(newValue, oldValue);
    }, {
      immediate: true //是否初始化执行
    });
    const changeMessage = () => {
      message.value = 'hello yankun'
    }
    onMounted(() => {
      console.log('我挂载完了');
    });
    onBeforeMount(() => {
      console.log('我在挂载前')
    })
    const names = reactive({
      fullname: 'yankun',
      username: 'xiaoyan',
    });
    const fullname = computed({  //返回一个ref
      set: function (newValue) {
        const tempNames = newValue.split(" ");
        names.fullname = tempNames[0];
        names.username = tempNames[1];
      }, get: function () {
        return names.fullname + names.username + '我是计算的'
      }
    })
    const score = ref(89);
    const scoreLevel = computed(() => {
      return score.value > 60 ? '及格' : '不及格'
    });
    const changeName = () => {
      fullname.value = 'xin ru'
    }
    const changeInfo = () => {
      info.name = 'kun'
      info.age = 20
    }
    return {
      names,
      fullname, scoreLevel,
      changeName,
      message,
      changeMessage,
      info,
      changeInfo,
      stopWatch
    }
  }
}
</script>

<style lang="scss" scoped></style>
